<template>
	<view class="goods-details">
		<SkeletonGoodsDetetails v-if="!isfinish"></SkeletonGoodsDetetails>
		<!-- 商品详情 -->
		<scroll-view class="details" scroll-y v-else>
			<view class="logo">
				<image :src="goodsDetails.goods_big_logo" mode="aspectFill" style="width: 100%;"></image>
			</view>
			<view class="price">
				￥{{goodsDetails.price}}
			</view>
			<view class="name">
				{{goodsDetails.name}}
			</view>
			<view class="intro" v-html="goodsDetails.introduce">
				 
			</view>

		</scroll-view>
		<!-- ugoodsnav 商品购买扩展组件-->
		<uni-goods-nav @click="" style="position: fixed;bottom: 0;width: 100%;" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import SkeletonGoodsDetetails from '../../components/SkeletonGoodsDetetails/SkeletonGoodsDetetails.vue';
    let isfinish=ref(false)
	onLoad((data) => {
		console.log(data.id)
		getGooodsDetails(data.id)
	})

	//定义返回的商品对象
	const goodsDetails = ref({})
	async function getGooodsDetails(id) {
		isfinish.value=false
	
		let res = await uni.$post("/goodInfoById", {
			id
		})
		if (res.code = 200) {
			isfinish.value=true
			
			goodsDetails.value = res.goodsList[0]
			goodsDetails.value.goods_big_logo = uni.$base_url + goodsDetails.value.goods_big_logo
		}
		console.log(goodsDetails.value)
	}
</script>

<style lang="scss">
	.details {
		padding: 0 10rpx;
		height: calc(100vh - 97px);
		/* #ifdef MP-WEIXIN */
		height:calc(100vh - 50px);
		/* #endif */
		
		.price {
			color: $uni-price-color;
			font-size: $uni-font-size-lg;
			margin: 5px 0;
		}
		.name{
			font-size: $uni-font-size-lg;
			color: $uni-text-color-grey;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		
	}
</style>